import api from '../../../atoms/api';

export default function logo() {
	return <div className="layout-logo">
		<img src={api.logo} alt="logo" className="layout-logo-medium-img" />
		<span>{''}</span>
		<style jsx>{`
.layout-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
	color: var(--color-primary);
	font-size: 1rem;
	cursor: pointer;
	animation: logoAnimation 0.3s ease-in-out;
}
.layout-logo:hover span{
	color: var(--color-primary-light-2);
}
.layout-logo-medium-img {
		width: 8rem;
		margin-right: 0;
	}
`}</style>
	</div>;
}
